let canvas = document.getElementById('canvas')
let bar1 = document.querySelector('.bar1')
let btn1 = document.querySelector('.btn1')
let btn2 = document.querySelector('.btn2')
let colorText = document.querySelector('.color-Text')
let cxt = canvas.getContext('2d')

let a = document.querySelector('a')
let url = null
// 利用事件冒泡给每个span绑定点击事件
bar1.onclick = function(e) {
    
    if(e.target.nodeName == "SPAN") {
        cxt.beginPath()
        this.getAttribute
      console.log(e.target.className);
      console.log(e.target.getAttribute('data-text'));
      let styleColor = e.target.className
      // span 文字对应的变化
      colorText.innerHTML = e.target.getAttribute('data-text') 
      colorText.style.color = styleColor

     canvas.onmousedown = function(evt) {
     // 鼠标按下的坐标
     let xEnter = evt.clientX - canvas.offsetLeft
     let yEnter = evt.clientY - canvas.offsetTop
    
     cxt.moveTo(xEnter,yEnter)
     canvas.onmousemove = function(e) {
        // 鼠标移动坐标
        let x = e.clientX - canvas.offsetLeft
        let y = e.clientY - canvas.offsetTop
      
       
        cxt.lineTo(x,y)
        cxt.strokeStyle = styleColor
        cxt.lineWidth= 1
        cxt.stroke()

      

       
        url = canvas.toDataURL('image/png', 0)
        a.href = url

        
    }

    canvas.onmouseup = function () {
         canvas.onmousemove = null
    }
  }


}



}  

//清空画布
btn1.onclick = function() {
// 每次点击之后都从新画
cxt.clearRect(0, 0, 500, 500)
cxt.beginPath()

}


// 橡皮檫
btn2.onclick = function () {

cxt.beginPath()

canvas.onmousedown = function(evt) {
     // 鼠标按下的坐标
     let xEnter = evt.clientX - canvas.offsetLeft
     let yEnter = evt.clientY - canvas.offsetTop
    
    //  cxt.moveTo(xEnter,yEnter)
     canvas.onmousemove = function(e) {
        // 鼠标移动坐标
        let x = e.clientX - canvas.offsetLeft
        let y = e.clientY - canvas.offsetTop
      
       
        // cxt.lineTo(x,y)
        // cxt.strokeStyle = "white"
        // cxt.lineWidth= 20

        // cxt.stroke()

        cxt.clearRect(x, y, 10, 10)

        url = canvas.toDataURL('image/png', 0)
        a.href = url
    }

    canvas.onmouseup = function () {
         canvas.onmousemove = null
    }


}

}


